<!--项目启动--意向项目库-->
<template>
  <div style="background: #f5f5f5">
    <div class="intentional-card">
      <div class="card-header">
        <div class="cap-title">意向项目</div>
      </div>
      <div class="card-table">
        <div class="top-search">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="项目名称" prop="entryName">
              <el-input
                v-model="queryParams.entryName"
                placeholder="请输入项目名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="项目类型" prop="entryType">
              <el-select v-model="queryParams.entryType" placeholder="项目类型" clearable>
                <el-option
                  v-for="item in entryTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom-container">
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="left-tree">
                <el-input
                  placeholder="输入关键字"
                  v-model="filterText"
                  suffix-icon="el-icon-search"
                >
                </el-input>
                <el-tree
                  class="filter-tree"
                  :data="treeData"
                  :props="defaultProps"
                  default-expand-all
                  :filter-node-method="filterNode"
                  ref="tree"
                >
                </el-tree>
              </div>
            </el-col>
            <el-col :span="20">
              <div style="height: 100%">
                <el-table :data="tableData" border style="width: 100%;" @row-click="handleRowClick">
                  <el-table-column prop="entryName" label="项目名称"></el-table-column>
                  <el-table-column prop="entryType" label="项目类型"></el-table-column>
                  <el-table-column prop="responsiblePerson" label="项目负责人"></el-table-column>
                  <el-table-column prop="depart" label="项目部门"></el-table-column>
                  <el-table-column prop="unit" label="所属单位"></el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <el-button @click.native.stop="handleClick(scope.row)" type="text" size="small">项目立项</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="4"
                  style="float: right; margin: 20px 0;"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <project-archives :row="selectedRow" v-if="type=='table'"></project-archives>
      <project-initiation :row="selectedRow" :ModalType="ModalType" v-if="type=='button'"></project-initiation>
    </el-dialog>
  </div>
</template>

<script>
import projectArchives from './components/projectArchives';
import projectInitiation from './components/projectInitiation';
export default {
  name: 'intentionalProjectLibrary',
  components: {projectArchives,projectInitiation},
  data() {
    return {
      queryParams: {
        entryName: '',
        entryType: undefined
      },
      entryTypeOptions: [
        { label: '防沙治沙', value: '0' },
        { label: '植树造林', value: '1' },
        { label: '绿化改造', value: '2' },
        { label: '机器人造林', value: '3' }
      ],
      tableData: [
        {
          entryName: '风光一体化防沙治沙',
          entryType: '防沙治沙',
          responsiblePerson: '张XX',
          depart: '防沙治沙部门',
          unit: '防沙治沙单位'
        },
        {
          entryName: '三北六期',
          entryType: '植树造林',
          responsiblePerson: '王X',
          depart: '绿化改造部门',
          unit: '三北六期绿化改造'
        },
        {
          entryName: '蚂蚁森林',
          entryType: '绿化改造',
          responsiblePerson: '张XX',
          depart: '苗木栽培部门',
          unit: '蚂蚁森林苗木栽培'
        },
        {
          entryName: '蓝旗机器人造林',
          entryType: '机器人造林',
          responsiblePerson: '刘XX',
          depart: '机器人造林部门',
          unit: '蓝旗机器人造林'
        }
      ],
      currentPage: 1,
      filterText: '',
      treeData: [{
        id: 1,
        label: '项目类型',
        children: [
          {
            id: 2,
            label: '防沙治沙'
          },
          {
            id: 3,
            label: '植树造林'
          },
          {
            id: 4,
            label: '绿化改造'
          },
          {
            id: 5,
            label: '机器人造林'
          }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible:false,
      selectedRow:{},
      type:'',
      ModalType:''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      //this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
    },

    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    //项目立项按钮
    handleClick(row) {
      this.type='button'
      this.ModalType='add'
      this.selectedRow = row;
      this.dialogVisible = true;
    },

    handleRowClick(row, column, event){
      this.type='table'
      this.selectedRow = row;
      this.dialogVisible = true;
    }
  }
}
</script>

<style scoped lang="scss">
.intentional-card {
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  border: 1px solid #e7eff3;
  box-shadow: 0 0 5px #dde9ef;
  width: 100%;
  color: #555;
  background-color: #fff;
  margin: 10px 6px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    padding: 10px;
    border-bottom: 1px solid #e7eff3;

    .cap-title {
      color: #11A983;
      border-bottom: 2px solid #11A983;
      cursor: pointer;
      margin: 0 10px 0 0;
    }
  }

  .card-table {
    padding: 31px 27px;
    height: 100%;

    .bottom-container{
      margin-top: 10px;
    }
  }
}
</style>
